import {
  createRouter,
  createWebHistory
} from 'vue-router'


import List from '../view/List.vue'

const routes = [{
  path: "/",
  name: "index",
  redirect: "/list",
  component: () => import('../App.vue'),
  children: [
    {
      path: '/list',
      name: 'List',
      meta: {
        keepAlive: false,
        title: '列表页'
      },
      component: List,
    },
    {
      path: '/ref',
      name: 'ref',
      meta: {
        keepAlive: false,
        title: 'ref'
      },
      component: () => import('../view/01. ref.vue'),
    },
    {
      path: '/reactive',
      name: 'reactive',
      meta: {
        keepAlive: false,
        title: 'reactive'
      },
      component: () => import('../view/02. reactive.vue'),
    },
    {
      path: '/toRefs',
      name: 'toRefs',
      meta: {
        keepAlive: false,
        title: 'toRefs'
      },
      component: () => import('../view/04. toRefs.vue'),
    },
    {
      path: '/toRef',
      name: 'toRef',
      meta: {
        keepAlive: false,
        title: 'toRef'
      },
      component: () => import('../view/03. toRef.vue'),
    },
    {
      path: '/readonly',
      name: 'readonly',
      meta: {
        keepAlive: false,
        title: 'readonly与shallowReadonly'
      },
      component: () => import('../view/05. readonly&&shallowReadonly.vue'),
    },
    {
      path: '/shallowRef',
      name: 'shallowRef',
      meta: {
        keepAlive: false,
        title: 'shallowRef与shallowReactive'
      },
      component: () => import('../view/06. shallowRef&&shallowReactive.vue'),
    },
    {
      path: '/toRaw',
      name: 'toRaw',
      meta: {
        keepAlive: false,
        title: 'toRaw与markRaw'
      },
      component: () => import('../view/07. toRaw&&markRaw.vue'),
    },
    {
      path: '/teleport',
      name: 'teleport',
      meta: {
        keepAlive: false,
        title: 'teleport瞬移组件'
      },
      component: () => import('../view/08. teleport.vue'),
    },
    {
      path: '/fragment',
      name: 'fragment',
      meta: {
        keepAlive: false,
        title: 'fragment片段'
      },
      component: () => import('../view/09. fragment.vue'),
    },
    {
      path: '/emits',
      name: 'emits',
      meta: {
        keepAlive: false,
        title: 'emits'
      },
      component: () => import('../view/10. emits.vue'),
    },
    {
      path: '/suspense',
      name: 'suspense',
      meta: {
        keepAlive: false,
        title: 'suspense异步组件处理'
      },
      component: () => import('../view/11. suspense.vue'),
    },
    {
      path: '/refGetElement',
      name: 'refGetElement',
      meta: {
        keepAlive: false,
        title: 'ref获取元素'
      },
      component: () => import('../view/12. refGetElement.vue'),
    },
    {
      path: '/lifeCycle',
      name: 'lifeCycle',
      meta: {
        keepAlive: false,
        title: '生命周期'
      },
      component: () => import('../view/13. lifeCycle.vue'),
    },
    {
      path: '/keepAlive',
      name: 'keepAlive',
      meta: {
        keepAlive: true,
        title: 'keepAlive路由缓存'
      },
      component: () => import('../components/keep-alive.vue'),
    },
    {
      path: '/computed',
      name: 'computed',
      meta: {
        keepAlive: false,
        title: 'computed计算属性'
      },
      component: () => import('../view/14. computed.vue'),
    },
    {
      path: '/watch',
      name: 'watch',
      meta: {
        keepAlive: false,
        title: 'watch与watchEffect监听属性'
      },
      component: () => import('../view/15. watch&&watchEffect.vue'),
    },
    {
      path: '/isResponsive',
      name: 'isResponsive',
      meta: {
        keepAlive: false,
        title: '响应式判断'
      },
      component: () => import('../view/16. isResponsive.vue'),
    },
    {
      path: '/diyHook',
      name: 'diyHook',
      meta: {
        keepAlive: false,
        title: '自定义hook'
      },
      component: () => import('../view/17. diyHook.vue'),
    },
    {
      path: '/detailChange',
      name: 'detailChange',
      meta: {
        keepAlive: false,
        title: '细节变更'
      },
      component: () => import('../view/18. detailChange.vue'),
    },
  ]
}]


const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router